<div class="importDatabase absolute-fill flex-vertical sql-migration">
    <div class="panel padding padding-md" data-bind="visible: $root.activeDatabase().isSharded()">
        <div>
            <div class="empty-set text-center margin-top-sm margin-bottom-sm mx-auto">
                <i class="icon-disabled text-warning icon-xl m-0"></i>
                <div class="lead">
                    <div class="vstack gap-3">
                        <span>
                            <div class="rounded-pill badge bg-faded-warning">
                                Feature not available
                            </div>
                        </span>
                        <span>
                            Import documents from a SQL database into the current RavenDB database is not available for
                            <i class="icon-sharding text-shard m-0"></i> sharded databases
                        </span>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="panel" data-bind="if: inFirstStep, visible: !$root.activeDatabase().isSharded() && inFirstStep">
        <div class="panel-body">
            <form class="flex-form" data-bind="submit: nextStep">
                <h3>Import documents from a SQL database into the current RavenDB database</h3>
                <div class="row">
                    <div class="col-lg-6">
                        <h4>Create new import configuration</h4>
                        <hr />
                        <div class="margin-top" data-bind="with: model">
                            <div class="form-group">
                                <div>
                                    <label class="control-label">SQL database driver</label>
                                </div>
                                <div class="flex-grow">
                                    <button class="btn btn-block dropdown-toggle text-left" data-toggle="dropdown">
                                        <span data-bind="text: labelForProvider(databaseType())"></span>
                                        <span class="caret"></span>
                                    </button>
                                    <ul class="dropdown-menu" data-bind="foreach: $data.constructor.possibleProviders">
                                        <li>
                                            <a href="#"
                                               data-bind="text: $parent.labelForProvider($data), click: $parent.databaseType.bind($parent.databaseType, $data)"></a>
                                        </li>
                                    </ul>
                                    <span class="help-block" data-bind="validationMessage: databaseType"></span>
                                    <div class="has-warning" data-bind="visible: databaseType() === 'MySQL_MySql_Data'">
                                        <div class="help-block">
                                            <i class="icon-warning"></i> 
                                            <span>
                                                This connector is deprecated. 
                                                MySqlConnector will be used instead. 
                                                Please update Factory to: MySqlConnector.MySqlConnectorFactory.
                                            </span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div data-bind="visible: databaseType() === 'MsSQL', with: sqlServer">
                                <div class="form-group"
                                     data-bind="validationElement: connectionString">
                                    <label class="control-label">
                                        Connection string<i class="required"></i>
                                        <br />
                                        <br />
                                        <small id="js-mssql-syntax" class="text-primary">Syntax <i class="icon-help"></i></small>
                                    </label>
                                    <div class="flex-grow">
                                        <textarea class="form-control"
                                                  data-bind="textInput: connectionString" rows="3"
                                                  title="The connection string for the SQL server"
                                                  placeholder="Enter the complete connection string for the Microsoft SQL Server">
                                        </textarea>
                                        <div>
                                            <small>
                                                <i class="icon-info"></i>
                                                Please include database name in your connection string.
                                            </small>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div data-bind="visible: databaseType() === 'MySQL_MySql_Data' || databaseType() === 'MySQL_MySqlConnector', with: mySql">
                                <div class="form-group"
                                     data-bind="validationElement: connectionString">
                                    <label class="control-label">
                                        Connection string<i class="required"></i>
                                        <br />
                                        <br />
                                        <small id="js-mysql-syntax" class="text-primary">Syntax <i class="icon-help"></i></small>
                                    </label>
                                    <div class="flex-grow">
                                        <textarea class="form-control"
                                                  data-bind="textInput: connectionString" rows="3"
                                                  title="The connection string for the MySQL server"
                                                  placeholder="Enter the complete connection string for the MySQL Server">
                                        </textarea>
                                        <div>
                                            <small>
                                                <i class="icon-info"></i>
                                                Please include database name in your connection string.
                                            </small>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div data-bind="visible: databaseType() === 'NpgSQL', with: npgSql">
                                <div class="form-group"
                                     data-bind="validationElement: connectionString">
                                    <label class="control-label">
                                        Connection string<i class="required"></i>
                                        <br />
                                        <br />
                                        <small id="js-npgsql-syntax" class="text-primary">Syntax <i class="icon-help"></i></small>
                                    </label>
                                    <div class="flex-grow">
                                        <textarea class="form-control"
                                                  data-bind="textInput: connectionString" rows="3"
                                                  title="The connection string for the PostgreSQL"
                                                  placeholder="Enter the complete connection string for the PostgreSQL">
                                        </textarea>
                                        <div>
                                            <small>
                                                <i class="icon-info"></i>
                                                Please include database name in your connection string.
                                            </small>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div data-bind="visible: databaseType() === 'Oracle', with: oracle">
                                <div class="form-group"
                                     data-bind="validationElement: connectionString">
                                    <label class="control-label">
                                        Connection string<i class="required"></i>
                                        <br />
                                        <br />
                                        <small id="js-oracle-syntax" class="text-primary">Syntax <i class="icon-help"></i></small>
                                    </label>
                                    <div class="flex-grow">
                                        <textarea class="form-control"
                                                  data-bind="textInput: connectionString" rows="3"
                                                  title="The connection string for the Oracle Database"
                                                  placeholder="Enter the complete connection string for the Oracle Database">
                                        </textarea>
                                        <div>
                                            <small>
                                                <i class="icon-info"></i>
                                                Please include database name in your connection string.
                                            </small>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="form-group flex-horizontal">
                                <div>
                                    <button class="btn btn-default" type="button"
                                            data-bind="click: $root.showAdvancedOptions.toggle.bind($root.showAdvancedOptions)">
                                        Advanced
                                    </button>
                                </div>
                                <div>
                                    <button class="btn btn-primary" type="submit"
                                            data-bind="disable: $root.spinners.schema, css: { 'btn-spinner': $root.spinners.schema }">
                                        <span class="icon-import"></span> <span>Create new import</span>
                                    </button>
                                </div>
                                <div class="flex-separator"></div>
                                <div>
                                    <button class="btn btn-default btn-info" title="Test the connection string connection"
                                            data-bind="click: $root.testConnection, disable: $root.spinners.testConnection(), css: { 'btn-spinner': $root.spinners.testConnection }">
                                        <i class="icon-rocket"></i>
                                        <span>Test Connection</span>
                                    </button>
                                </div>
                            </div>
                            <div data-bind="collapse: $root.showAdvancedOptions">
                                <h3>Advanced options</h3>
                                <div class="form-group">
                                    <label class="control-label">&nbsp;</label>
                                    <div class="toggle">
                                        <input id="pascalCase" type="checkbox" data-bind="checked: advanced.usePascalCase">
                                        <label for="pascalCase">Convert property names to <strong>PascalCase</strong></label>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="control-label">&nbsp;</label>
                                    <div class="toggle">
                                        <input id="removeId" type="checkbox" data-bind="checked: advanced.trimSuffix">
                                        <label for="removeId">
                                            Trim suffix from property names:
                                            <input class="form-control suffix-input input-sm" data-bind="textInput: advanced.suffixToTrim" />
                                        </label>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="control-label">&nbsp;</label>
                                    <div class="toggle">
                                        <input id="manyToMany" type="checkbox" data-bind="checked: advanced.detectManyToMany">
                                        <label for="manyToMany">Detect <strong>many-to-many</strong> relationships</label>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label class="control-label">&nbsp;</label>
                                    <div class="toggle">
                                        <input id="includeUnsupported" type="checkbox" data-bind="checked: advanced.includeUnsupported">
                                        <label for="includeUnsupported">Include <strong>unsupported</strong> data types</label>
                                    </div>
                                </div>
                                <div class="form-group" data-bind="visible: databaseType() === 'NpgSQL'">
                                    <label class="control-label">&nbsp;</label>
                                    <div class="toggle">
                                        <input id="includeSchemaList" type="checkbox" data-bind="checked: npgSql.includeSchemas">
                                        <label for="includeSchemaList">
                                            Specify schemas to use <small>(comma separated)</small>
                                            <input class="form-control" placeholder="public" data-bind="textInput: npgSql.schemas, enable: npgSql.includeSchemas" />
                                        </label>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div data-bind="with: testConnectionResult">
                            <div class="padding bg-success small" data-bind="visible: Success">
                                <div>Successfully connected to the server</div>
                            </div>
                            <div class="padding bg-danger small"
                                 data-bind="visible: !Success">
                                Connection test failed: <span data-bind="text: $root.fullErrorDetailsVisible() ? Error : $root.shortErrorText()"></span>
                                <div>
                                    <a href="#"
                                       data-bind="click: $root.fullErrorDetailsVisible.toggle.bind($root.fullErrorDetailsVisible), text: $root.fullErrorDetailsVisible() ? 'hide details' : 'show details'">
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-6">
                        <h4>Continue existing migration</h4>
                        <hr />
                        <div class="bg-info padding padding-xs margin-bottom"><small><i class="icon-info"></i> Note: Use this option if you have exported migration file</small></div>
                        <div class="row form-group">
                            <div class="col-lg-12">
                                <div class="input-group file-input" data-bind="validationElement: importedFileName">
                                    <input type="file" id="jsImportSqlFilePicker" data-bind="event: { change: _.partial(fileSelected, $element.value) }" tabindex="-1">
                                    <span class="static-name form-control" data-bind="text: importedFileName() || 'Select file...'"></span>
                                    <span class="input-group-btn">
                                        <label for="jsImportSqlFilePicker" class="btn btn-default">
                                            <i class="icon-document"></i><span>Browse</span>
                                        </label>
                                    </span>
                                    <p class="help-block" data-bind="validationMessage: importedFileName"></p>
                                </div>
                            </div>
                        </div>
                        <button class="btn btn-primary" type="button"
                                data-bind="click: continueWithFile">
                            <span class="icon-import"></span> <span>Continue using configuration file</span>
                        </button>
                    </div>
                </div>
            </form>
        </div>
    </div>
    <div class="flex-grow flex-vertical modal-root" id="js-second-step" data-bind="if: !inFirstStep()">
            <div class="flex-header flex-horizontal">
                <div class="panel panel-default flex-grow no-margin">
                    <div class="padding padding-sm flex-horizontal">
                        <div class="checkbox checkbox-default checkbox-inline align-checkboxes hidden-fullscreen" title="Select all or none">
                            <input type="checkbox" class="styled" data-bind="click: onToggleAllClick, checkboxTriple: globalSelectionState, event: { change: toggleSelectAll }" />
                            <label></label>
                        </div>
                        <button class="btn btn-primary hidden-fullscreen"
                                data-bind="click: $root.migrate, disable: $root.spinners.importing() || !$root.selectedCount(), css: { 'btn-spinner': $root.spinners.importing }">
                            <i class="icon-import"></i>
                            <span>Migrate <span data-bind="text: $root.pluralize(selectedCount(), 'table', 'tables')"></span> </span><span data-bind="visible: model.testImport">(partial)</span>
                        </button>
                        <div>
                            <input type="text" accesskey="/" class="form-control filter-input" placeholder="Filter" title="Filter tables (Alt+/)" data-bind="textInput: $root.searchText" />
                        </div>
                        <div class="flex-separator"></div>
                        <div>
                            <button class="btn btn-default hidden-fullscreen" data-bind="click: exportConfiguration">
                                <i class="icon-export"></i>
                                <span>Export configuration</span>
                            </button>
                            <button data-bind="click: enterFullScreen" class="btn btn-default hidden-fullscreen">
                                <i class="icon-fullscreen"></i>
                                <span>Full screen mode</span>
                            </button>
                            <button class="btn btn-default exit-button" data-bind="click: exitFullScreen">
                                <i class="icon-exit-fullscreen"></i>
                                <span>Exit full screen</span>
                            </button>
                            <div class="dropdown">
                                <button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
                                    <i class="icon-settings"></i><span>Settings</span>
                                    <span class="caret"></span>
                                </button>
                                <div class="dropdown-menu settings-menu dropdown-menu-right" data-bind="dropdownPanel: true, template: { name: 'migration-settings-template' }">
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="scroll flex-grow js-scroll-tables">
                <div data-bind="foreach: $root.currentTables">
                    <div class="panel panel-default js-root-table-panel">
                        <div class="flex-horizontal padding padding-sm panel-heading">
                            <div class="checkbox" data-placement="left">
                                <input type="checkbox" class="js-table-checkbox" data-bind="click: $root.onCollapseTable, css:{ 'disabled': $root.createLinksCount($data) }, checked: checked, attr: { id: 'table_' + $index() }" />
                                <label data-bind="attr: { for: 'table_' + $index() }">&nbsp;</label>
                            </div>
                            <div class="flex-horizontal flex-wrap table-header">
                                <span class="with-top-label" data-label="Schema" data-bind="text: tableSchema"></span>
                                <span class="with-top-label js-sql-table-name" data-label="Table" data-bind="text: tableName"></span>
                                <i class="icon-arrow-filled-right"></i>
                                <div class="with-top-label raven-property-name inline-edit" data-bind="css: { 'edit-disabled': !checked() }" data-label="Collection">
                                    <span class="static" data-bind="text: collectionName"></span>
                                    <input class="form-control input-sm" data-bind="textInput: collectionName" />
                                </div>
                            </div>
                            <div class="flex-separator"></div>
                            <div class="customizations flex-horizontal" data-bind="visible: checked">
                                <div data-bind="visible: customizeQuery" class="margin-right nobr">
                                    <i title="Filtering is enabled" class="icon-tick text-success"></i>
                                    <span>filtering</span>
                                </div>
                                <div data-bind="visible: transformResults" class="margin-right nobr">
                                    <i title="Transform script is enabled" class="icon-tick text-success"></i>
                                    <span>transform</span>
                                </div>
                            </div>
                            <div data-bind="visible: checked">
                                <button class="btn btn-default" title="Show incoming links" data-bind="click: $root.showIncomingReferences">
                                    <i class="icon-sql-many-to-one"></i>
                                    <span data-bind="text: $root.createLinksCount($data)"></span>
                                </button>
                                <button class="btn btn-default" data-bind="click: $root.enterEditMode, css: { active: $data === $root.itemBeingEdited() }">
                                    <i class="icon-edit"></i>
                                    <span>Filter / Transform</span>
                                </button>
                            </div>
                        </div>
                        <div class="table-content" data-bind="collapse: checked">
                            <div class="panel-body">
                                <div class="table-warning has-error" data-bind="visible: hasDuplicateProperties">
                                    <div class="help-block">
                                        <i class="icon-warning"></i> This document contains duplicate property names
                                    </div>
                                </div>
                                <div class="document-id">
                                    <span class="text-muted"><i class="icon-sql-document-id"></i> Document ID:</span>
                                    <span data-bind="text: documentIdTemplate"></span>
                                </div>
                                <div class="object-container" data-bind="template: { name: 'object-template' }">
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="flex-footer panel-default" data-bind="visible: $root.pageCount() > 1">
                <div class="panel-body flex-horizontal">
                    <div>Page <span data-bind="text: $root.currentPage() + 1"></span> <span data-bind="text: '(' + $root.currentLocationHumane() + ')'"></span></div>
                    <div data-bind="foreach: _.range(0, $root.pageCount())">
                        <button class="btn btn-sm" data-bind="text: $data + 1, click: _.partial($root.setCurrentPage, $data), css: { 'active': $root.currentPage() === $data }"></button>
                    </div>
                </div>
            </div>
            <div id="editTransform" class="panel shadow-style slidein-style" data-bind="visible: itemBeingEdited, with: itemBeingEdited">
                <div class="padding">
                    <div>
                        <label>
                            <strong>SQL Table:</strong> <span data-bind="text: tableSchema"></span> / <span data-bind="text: tableName"></span>
                        </label>
                    </div>
                    <div class="toggle">
                        <input id="customizeQuery" type="checkbox" data-bind="checked: customizeQuery">
                        <label for="customizeQuery">Filter source table records</label>
                    </div>
                    <div data-bind="collapse: customizeQuery">
                        <label><strong>SQL Query:</strong></label>
                        <div data-bind="validationElement: query">
                            <pre class="form-control editor"
                                 data-bind="aceEditor: { code: query, fontSize: '14px', lang: $root.aceEditorLangMode(), completer: $root.completer }, validationOptions: { errorsAsTitle: false }, validationElement: query" style="height: 200px;"></pre>
                            <div data-bind="validationOptions: { errorsAsTitle: false }, validationElement: query">
                                <div class="help-block" data-bind="validationMessage: query"></div>
                            </div>
                        </div>
                    </div>
                    <div class="toggle">
                        <input id="transformResults" type="checkbox" data-bind="checked: transformResults">
                        <label for="transformResults">Transform documents <small class="js-script-popover"><i class="icon-info text-info"></i></small></label>
                    </div>
                    <div data-bind="collapse: transformResults">
                        <label>
                            <strong>Script:</strong>
                        </label>
                        <div data-bind="validationElement: patchScript">
                            <pre class="form-control editor"
                                 data-bind="aceEditor: { code: patchScript, fontSize: '14px', lang: 'ace/mode/javascript' }, validationOptions: { errorsAsTitle: false }, validationElement: patchScript" style="height: 300px;"></pre>
                            <div data-bind="validationOptions: { errorsAsTitle: false }, validationElement: patchScript">
                                <div class="help-block" data-bind="validationMessage: patchScript"></div>
                            </div>
                        </div>
                    </div>
                    <hr />
                    <div class="flex-form">
                        <div class="form-group">
                            <label class="control-label">Test mode:</label>
                            <div class="flex-grow">
                                <div class="btn-group">
                                    <button type="button" class="btn dropdown-toggle" data-toggle="dropdown">
                                        <span data-bind="visible: testMode() === 'First'">
                                            <span>Use first record matching query</span>
                                        </span>
                                        <span data-bind="visible: testMode() === 'ByPrimaryKey'">
                                            <span>Specify primary key values to use</span>
                                        </span>
                                        <span class="caret"></span>
                                    </button>
                                    <ul class="dropdown-menu">
                                        <li>
                                            <a href="#" data-bind="click: _.partial(testMode, 'First')">
                                                <span>Use first record matching query</span>
                                            </a>
                                        </li>
                                        <li>
                                            <a href="#" data-bind="click: _.partial(testMode, 'ByPrimaryKey')">
                                                Specify primary key values to use
                                            </a>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                        <div data-bind="foreach: testPrimaryKeys, visible: testMode() === 'ByPrimaryKey'">
                            <div class="form-group" data-bind="validationElement: value">
                                <label class="control-label" data-bind="text: $parent.primaryKeyColumns()[$index()].sqlName"></label>
                                <div class="flex-grow">
                                    <input data-bind="textInput: value" class="form-control" />
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="margin-top text-right">
                        <button title="Test" class="btn btn-primary" data-bind="click: $root.runTest, disable: $root.spinners.test, css: { 'btn-spinner': $root.spinners.test }">
                            <i class="icon-rocket"></i><span>Test</span>
                        </button>
                        <button title="Close" class="btn btn-default" data-bind="click: $root.closeEditedTransformation"><i class="icon-cancel"></i> <span>Close</span></button>
                    </div>
                </div>
            </div>
    </div>
</div>

<script type="text/html" id="object-template">
    <!-- ko if:documentColumns -->
    <div class="prop-table">
        <!-- ko foreach:documentColumns -->
            <div class="prop-table-row">
                <div class="sqlName" data-bind="text: sqlName, attr:{ title: sqlName }"></div>
                <div class="arrow"><i class="icon-arrow-filled-right"></i></div>
                <div class="inline-edit">
                    <div class="static">
                        <span class="raven-property-name" data-bind="text: propertyName, attr:{ title: propertyName }"></span> <span class="text-muted raven-property-type" data-bind="html: columnTypeAsHtml($root.model.binaryToAttachment())"></span>
                    </div>
                    <input class="form-control input-sm" data-bind="textInput: propertyName" />
                </div>
            </div>
        <!-- /ko -->
    </div>
    <!-- /ko -->
    <div class="references-container">
        <!-- ko foreach: references -->
        <div class="reference-item" data-bind="attr: { 'data-ref-id': id }">
                <div class="relation" data-bind="visible: type === 'OneToMany'">
                    <div class="key" title="primary key">
                        <span class="key-type primary"><i class="icon-key"></i></span>
                        <strong>
                            <span data-bind="text: $parent.getPrimaryKeyColumnNames().join(',')"> </span>
                        </strong>
                    </div>
                    <div class="relation-type" title="one-to-many relation">
                        <i data-bind="attr: { class: getTypeClass() }"></i>
                    </div>
                    <div class="from" title="from foreign key">
                        <span class="text-muted"> <span class="key-type foreign"><i class="icon-key"></i></span></span>
                        <span data-bind="text: joinColumns.join(', ')"></span>
                    </div>
                    <div class="in">
                        <strong>
                            <a href="#" class="nobr" data-bind="attr: { title: 'Navigate to reverse reference in ' + targetTable.tableName + ' table'}, click: $root.goToReverseReference">
                                <i class="icon-table"></i> <span data-bind="text: targetTable.tableName"></span>
                            </a>
                        </strong>
                    </div>
                </div>
                <div class="relation" data-bind="visible: type === 'ManyToOne'">
                    <div  class="key" title="foreign key">
                        <span class="key-type foreign"><i class="icon-key"></i></span>
                        <strong>
                            <span data-bind="text: joinColumns.join(', ')"></span>
                        </strong>
                    </div>
                    <div class="relation-type" title="many-to-one relation">
                        <i data-bind="attr: { class: getTypeClass() }"></i>
                    </div>
                    <div class="from" title="from primary key">
                        <span class="text-muted"> <span class="key-type primary"><i class="icon-key"></i></span></span>
                        <span data-bind="text: targetTable.getPrimaryKeyColumnNames().join(',')"></span>
                    </div>
                    <div class="in" title="in table">
                        <strong>
                            <a href="#" class="nobr" data-bind="attr: { title: 'Navigate to reverse reference in ' + targetTable.tableName + ' table'}, click: $root.goToReverseReference">
                                <i class="icon-table"></i>
                                <span data-bind="text: targetTable.tableName"></span>
                            </a>
                        </strong>
                    </div>
                </div>
                <div class="actions-container">
                    <div class="btn-group link-actions">
                        <button class="btn btn-sm btn-default" data-bind="css: { active: action() === 'skip' }, click: _.partial($root.onActionClicked, $data, 'skip')"><i class="icon-skip"></i> <span>skip</span></button>
                        <button class="btn btn-sm btn-default js-btn-link" data-bind="css: { active: action() === 'link', disabled: !canLinkTargetTable() }, click: _.partial($root.onActionClicked, $data, 'link')"><div><i class="icon-link"></i> <span>link</span></div></button>
                        <button class="btn btn-sm btn-default js-btn-embed" data-bind="css: { active: action() === 'embed' }, click: _.partial($root.onActionClicked, $data, 'embed')"><i class="icon-embed"></i> <span>embed</span></button>
                    </div>
                    <span class="arrow" data-bind="visible: effectiveInnerTable() || effectiveLinkTable()">
                        <i class="icon-arrow-filled-right"></i>
                    </span>
                    <div class="inline-edit" data-bind="with: effectiveInnerTable, visible: action() === 'embed'">
                        <span class="static">
                            <span class="raven-property-name m-0" data-bind="text: $parent.name"></span>
                        </span>
                        <input class="form-control input-sm" data-bind="textInput: $parent.name" />
                    </div>
                    <div class="inline-edit" data-bind="with: effectiveLinkTable, visible: action() === 'link'">
                        <div class="static">
                            <span class="raven-property-name" data-bind="text: $parent.name"></span>:
                            <span class="text-muted" data-bind="visible: $parent.type === 'OneToMany'">[</span>
                            <span data-bind="text: documentIdTemplate"></span>
                            <span class="text-muted" data-bind="visible: $parent.type === 'OneToMany'">, ...]</span>
                        </div>
                        <input class="form-control input-sm" data-bind="textInput: $parent.name" />
                    </div>
                    <div data-bind="with: effectiveInnerTable, visible: action() === 'embed'">
                        <div class="d-flex align-items-center gap-3 margin-left">
                            <div class="small-label">SQL keys</div>
                            <div class="btn-group link-actions">
                                <button class="btn btn-sm btn-default" title="Skip @sql-keys" 
                                        data-bind="css: { active: sqlKeysStorage() === 'None' }, click: _.partial(sqlKeysStorage, 'None')">
                                    <i class="icon-skip"></i>
                                </button>
                                <button class="btn btn-sm btn-default" title="Put @sql-keys as a nested document property" 
                                        data-bind="css: { active: sqlKeysStorage() === 'AsNestedDocumentProperty' }, click: _.partial(sqlKeysStorage, 'AsNestedDocumentProperty')">
                                    <i class="icon-nested-document-property"></i>
                                </button>
                                <button class="btn btn-sm btn-default" title="Put @sql-keys in document metadata" 
                                        data-bind="css: { active: sqlKeysStorage() === 'OnDocumentMetadata' }, click: _.partial(sqlKeysStorage, 'OnDocumentMetadata')">
                                    <i class="icon-document-metadata"></i>
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
        </div>
        <div class="inner-table" data-bind="with: effectiveInnerTable">
            <div data-bind="css: { 'array-container': $parent.type === 'OneToMany'}">
                <div class="object-container" data-bind="template: { name: 'object-template' }">
                </div>
            </div>
        </div>
        <!-- /ko -->
    </div>
</script>

<script type="text/html" id="migration-settings-template">
    <form class="flex-form padding" data-bind="with: model">
        <div class="form-group" data-bind="validationElement: batchSize">
            <label class="control-label">Batch size</label>
            <div class="flex-grow">
                <input class="form-control" placeholder="Migration batch size" data-bind="numericInput: batchSize">
            </div>
        </div>
        <div class="form-group">
            <label class="control-label">Convert binary columns to attachments</label>
            <div class="flex-grow">
                <div class="toggle">
                    <input type="checkbox" class="styled" data-bind="checked: binaryToAttachment">
                    <label></label>
                </div>
            </div>
        </div>
        <div class="form-group no-margin">
            <label class="control-label">Partial migration <br /><small class="text-muted">limits maximum number of documents<br /> per each table</small></label>
            <div class="flex-grow">
                <div class="toggle">
                    <input type="checkbox" class="styled" data-bind="checked: testImport">
                    <label></label>
                </div>
            </div>
        </div>
        <div class="form-group" data-bind="validationElement: maxDocumentsToImportPerTable, visible: testImport">
            <label class="control-label left-indent">Maximum rows to process<br /><small class="text-muted">per SQL table</small></label>
            <div class="flex-grow">
                <input class="form-control" placeholder="Migration batch size" data-bind="numericInput: maxDocumentsToImportPerTable">
            </div>
        </div>
        <div class="flex-horizontal">
            <div class="flex-separator"></div>
            <button class="btn btn-default btn-sm close-panel">
                Close
            </button>
        </div>
    </form>
</script>
